<template>
	<view class="content">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="我的团队" leftIconColor="#fff" :autoBack="true"
			:placeholder="false">
			<view class="right-text" slot="right" @click="goInvite">
				邀请好友
			</view>
		</u-navbar>
		<view style="height: 6vh;"></view>
		<view class="content-box">
			<view class="branch">
				<view class="branch-text">
					云矿石
				</view>
				<view class="branch-num">
					{{userInfo.balance || 0}}
				</view>
			</view>
			<view class="result">
				<view class="result-item">
					<view class="result-text">
						团队业绩
					</view>

					<view class="result-num">
						{{team.tuanzhi_reward || 0}}
					</view>
				</view>
				<view class="result-item next-item">
					<view class="result-text">
						有效成员
					</view>

					<view class="result-num">
						{{team.yx_team||0}}
					</view>
				</view>
			</view>
			<!-- <view class="asset">
				<view class="asset-top">
					<view class="asset-text">
						<text>云矿石</text>
						<image v-if="userInfo.team_level == 1" src="/static/my/VIP1.png" mode=""></image>
						<image v-if="userInfo.team_level == 2" src="/static/my/VIP2.png" mode=""></image>
						<image v-if="userInfo.team_level == 3" src="/static/my/VIP3.png" mode=""></image>
						<image v-if="userInfo.team_level == 4" src="/static/my/VIP4.png" mode=""></image>
					</view>
					<view class="asset-num">
						{{userInfo.balance || 0}}
					</view>
				</view>
				<view class="asset-cont">
					<view class="asset-item">
						<view class="cont-num">
							{{team.tuanzhi_reward || 0}}
						</view>
						<view class="cont-text">
							总收益
						</view>
					</view>
					<view class="asset-item">
						<view class="cont-num">
							{{team.withdrawal || 0}}
						</view>
						<view class="cont-text">
							可提现(USDT)
						</view>
					</view>
					<view class="asset-item">
						<view class="cont-num">
							{{team.order_total || 0}}
						</view>
						<view class="cont-text">
							团队总资产
						</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="asset2">
				<view class="asset-cont">
					<view class="asset-item">
						<view class="cont-num">
							{{team.push_num ||0}}
						</view>
						<view class="cont-text">
							直推总人数
						</view>
					</view>
					<view class="asset-item">
						<view class="cont-num">
							{{team.zt_yx_num||0}}
						</view>
						<view class="cont-text">
							直推有效人数
						</view>
					</view>
					<view class="asset-item">
						<view class="cont-num">
							{{team.all_reward||0}}
						</view>
						<view class="cont-text">
							累计推荐收益
						</view>
					</view>
					
				</view>
			</view> -->
			<!-- <view class="asset2">
				<view class="asset-cont">
					<view class="asset-item">
						<view class="cont-num">
							{{team.yx_team||0}}
						</view>
						<view class="cont-text">
							团队有效人数
						</view>
					</view>
					<view class="asset-item">
						<view class="cont-num">
							{{team.team||0}}
						</view>
						<view class="cont-text">
							团队总人数
						</view>
					</view>
					<view class="asset-item">
						<view class="cont-num">
							{{team.tuan_reward||0}}
						</view>
						<view class="cont-text">
							累计团队收益
						</view>
					</view>
				</view>
			</view> -->
			<view class="head">
				<view :class="item.show == true?'activity':'stillness'" class="head-item"
					v-for="(item,index) in headList" :key="index" @click="headTab(index)">
					{{item.text}}
				</view>
			</view>
			<!-- <view class="member" v-if="list.length > 0">
				<view class="member-item" v-for="(item,index) in list" :key="index">
					<view class="item-top">
						<view class="item-left">
							<view class="name">
								{{item.user}}
							</view>
							<view>
								{{item.tel}}
							</view>
						</view>
						<view class="real" v-if="item.is_effective == 1">
							有效会员
						</view>
						<view class="no_real" v-else>
							无效会员
						</view>
					</view>
					<view class="member-info">
						<view class="info-item">
							<view class="info-num">
								{{item.push_num}}
							</view>
							<view class="info-text">
								直推人数
							</view>
						</view>
						<view class="info-item">
							<view class="info-num">
								{{item.tuan_num}}
							</view>
							<view class="info-text">
								团队人数
							</view>
						</view>
						<view class="info-item">
							<view class="info-num">
								{{item.reward_census}}
							</view>
							<view class="info-text">
								工厂资产
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="member" v-if="list.length > 0">
				<view class="member-item" v-for="(item,index) in list" :key="index">
					<view class="item-top">
						<view class="item-left">
							<view class="name">
								{{item.user}}
							</view>
							<view>
								{{item.tel}}
							</view>
						</view>
						<view class="real">
							已实名
						</view>
						<!-- <view class="real no_real">
							未实名
						</view> -->
					</view>
					<view class="member-info">
						<view class="info-item">
							<image src="../../../static/my/person.png" mode=""></image>
							<view class="info-right">
								<view class="right-num">
									0
								</view>
								<view class="right-text">
									推荐人数
								</view>
							</view>
						</view>
						<view class="info-item">
							<image src="../../../static/my/capital.png" mode=""></image>
							<view class="info-right">
								<view class="right-num">
									0
								</view>
								<view class="right-text">
									累计充值
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				headList: [{
						text: '直推成员',
						show: true
					},
					{
						text: '团队成员',
						show: false
					}
				],
				userInfo: {},
				page: 1,
				list: [],
				type: 1,
				team: {}
			}
		},
		onLoad() {
			this.getUser()
			this.getTeam()
		},
		onReachBottom() {
			this.page++
			this.status = 'loading'
			this.getTeam()
		},
		methods: {
			headTab(index) {
				this.headList.map((item) => {
					item.show = false
				})
				this.headList[index].show = true
				if (index == 0) {
					this.type = 1
					this.getTeam()
				} else {
					this.type = 4
					this.getTeam()
				}
			},
			getUser() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/myIndex',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data.user
						this.assets = res.data.assets
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getTeam() {
				let params = {
					page: this.page,
					type: this.type,
					status: 0
				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/team',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.team = res.data
						if (res.data.list.length < 10) {
							this.status = 'nomore'
						}
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goInvite() {
				uni.navigateTo({
					url: '/pages/home/invite/index'
				})
			}
		}
	}
</script>

<style>
	page {
		background: #17191A;
	}
</style>
<style lang="scss" scoped>
	.content {
		height: 544rpx;
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 544rpx;

		.right-text {
			font-size: 28rpx;
			color: #eee;
		}

		.content-box {
			padding: 30rpx;

			.branch {
				height: 300rpx;
				background-image: url('../../../static/my/branch.png');
				background-repeat: no-repeat;
				background-size: 100% 300rpx;
				padding: 30rpx;
				color: #fff;

				.branch-text {
					font-size: 28rpx;
					margin-top: 30rpx;
				}

				.branch-num {
					margin-top: 20rpx;
					font-size: 60rpx;
					font-weight: bold;
				}
			}

			.result {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.result-item {
					width: 48%;
					height: 161rpx;
					background-image: url('../../../static/my/assets1.png');
					background-repeat: no-repeat;
					background-size: 100% 161rpx;
					padding: 30rpx;
					color: #fff;

					.result-text {
						font-size: 28rpx;
					}

					.result-num {
						font-size: 32rpx;
						font-weight: bold;
						margin-top: 20rpx;
					}
				}

				.next-item {
					background-image: url('../../../static/my/assets2.png');
				}
			}

			.asset2 {
				color: #fff;
				background-color: rgba(255, 255, 255, .08);
				border-radius: 20rpx;
				margin-top: 30rpx;

				.asset-cont {
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					text-align: center;

					.asset-item {
						width: 33%;

						.cont-num {
							font-size: 36rpx;
							font-weight: 600;
						}

						.cont-text {
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
				}
			}

			.asset {
				height: 286rpx;
				background-image: url('../../../static/my/team-bg.png');
				background-repeat: no-repeat;
				background-size: 100% 286rpx;
				color: #fff;

				.asset-top {
					padding: 30rpx;

					.asset-text {
						height: 56rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						image {
							width: 138rpx;
							height: 56rpx;
							margin-left: 20rpx;
						}
					}

					.asset-num {
						font-size: 40rpx;
						font-weight: 600;
						margin-top: 10rpx;
					}
				}

				.asset-cont {
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					text-align: center;
					padding-top: 10rpx;

					.asset-item {
						width: 33%;

						.cont-num {
							font-size: 36rpx;
							font-weight: 600;
						}

						.cont-text {
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
				}
			}

			.tips {
				padding-top: 30rpx;
				color: #fff;
				font-size: 26rpx;
				font-weight: 600;
			}

			.head {
				width: 70%;
				display: flex;
				justify-content: space-between;
				text-align: center;
				background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
				border-radius: 40rpx;
				border: 4rpx solid rgba(108, 233, 137, 0.12);
				margin: 0 auto;
				margin-top: 40rpx;

				.head-item {
					width: 48%;
					width: 305rpx;
					font-size: 28rpx;
					font-weight: 600;
					border: 1rpx solid transparent;
					padding: 20rpx;
					border-radius: 40rpx;
				}

				.activity {
					width: 48%;
					color: #17191A;
					background: linear-gradient(90deg, #C8F673 0%, #98F083 100%);
				}

				.stillness {
					width: 48%;
					color: #fff;
				}
			}

			.member {
				.member-item {
					padding: 30rpx;
					border-radius: 30rpx;
					margin-bottom: 30rpx;
					background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
					border: 4rpx solid rgba(108, 233, 137, 0.12);
					border-radius: 30rpx;
					position: relative;
					margin-top: 30rpx;

					.item-top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.item-left {
							font-size: 24rpx;
							color: #eee;

							.name {
								color: #fff;
								font-size: 32rpx;
								font-weight: 600;
								margin-bottom: 20rpx;
							}
						}

						.real {
							position: absolute;
							right: 0;
							top: 0;
							background: linear-gradient(134deg, rgba(200, 246, 115, 0.06) 0%, rgba(200, 246, 115, 0.26) 100%);
							padding: 15rpx 30rpx;
							color: #A1FFA9;
							font-size: 24rpx;
							border: 4rpx solid rgba(108, 233, 137, 0.12);
							border-top-right-radius: 30rpx;
							border-bottom-left-radius: 30rpx;
						}

						.no_real {
							background: linear-gradient(134deg, rgba(205, 205, 205, 0.06) 0%, rgba(143, 143, 143, 0.26) 100%);
							border: 4rpx solid rgba(186, 186, 186, 0.12);
							color: #ABABAB;
						}
					}

					.member-info {
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;

						.info-item {
							display: flex;
							align-items: center;

							image {
								width: 75rpx;
								height: 75rpx;
							}

							.info-right {
								margin-left: 30rpx;

								.right-num {
									font-size: 32rpx;
									color: #fff;
									font-weight: bold;
								}

								.right-text {
									font-size: 24rpx;
									color: #999;
									margin-top: 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>